import React from 'react'
import WeUI from 'react-weui'
import { useNavigate } from 'react-router-dom'
import IconHome from '../assets/images/home.jpg'
import IconUser from '../assets/images/user.jpg'

const {
    Tab,
    TabBar,
    TabBody,
    TabBarItem,
    TabBarIcon,
    Cells,
    CellsTitle,
    Cell,
    CellBody,
    CellHeader,
    CellFooter,
    Badge
} = WeUI

const User = () => {
    const navigate = useNavigate()
    const gotoPage = (page) => {
        navigate(page)
    }

    return (
        <Tab>
            <TabBody>
                <div>
                    <Cells style={{ marginTop: 0 }}>
                        <Cell onClick={gotoPage.bind(null, '/login')}>
                            {/* bind() 方法创建一个新的函数，在 bind() 被调用时，
                            这个新函数的 this 被指定为 bind() 的第一个参数，
                            而其余参数将作为新函数的参数，供调用时使用。 */}
                            <CellHeader style={{ position: 'relative', marginRight: '10px' }}>
                                <img src={IconUser}
                                    style={{ width: '50px', display: 'block' }} />
                            </CellHeader>
                            <CellBody>
                                <p>Cavan</p>
                                <p style={{ color: '#888', fontSizr: '12px' }}>欢迎来到图书馆</p>
                            </CellBody>
                        </Cell>
                    </Cells>
                </div>
            </TabBody>
            <TabBar>
                <TabBarItem
                    active={false}
                    icon={<img src={IconHome} />}
                    label="书单"
                    onClick={gotoPage.bind(null, '/')}
                />
                <TabBarItem
                    active={true}
                    icon={<img src={IconUser} />}
                    label="我的"
                />
            </TabBar>
        </Tab>
    )
}

export default User